<#-- generate_main.ftl -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码生成系统</title>
    <link href="/css/main.css?ver=${.now?long}" rel="stylesheet">
    <link href="/css/head.css?ver=${.now?long}" rel="stylesheet">
    <link href="/css/datasource.css?ver=${.now?long}" rel="stylesheet">
    <link href="/css/gencode.css?ver=${.now?long}" rel="stylesheet">
    <!-- 引入 layui.css -->
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script>
        window.API_BASE_URL = '${baseUrl!}'
        console.log("当前路径：", window.API_BASE_URL)
    </script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/axios.util.js?time=${.now?long}"></script>
    <script src="/js/main.js?time=${.now?long}"></script>
    <script src="/js/datasource.js?time=${.now?long}"></script>
    <script src="/js/gencode.js?time=${.now?long}"></script>
</head>
<body>
<div class="head-main">
    <div class="logo">
        <img src="/imgs/logo.png" alt="">
        <h1 class="title">
            代码生成
        </h1>
    </div>
    <div class="github">
        <i class="layui-icon layui-icon-gitee" style="font-size: 2rem; color: #D50106;"></i>
        <i class="layui-icon layui-icon-github" style="font-size: 2rem; color: #FFFFFF;"></i>
    </div>
</div>
<h3 class="nav-title">数据源管理</h3>
<hr class="layui-border-green">
<div class="layui-col-xs6 layui-col-md4">
    <div class="datasource-add">
        <h4>添加数据源：</h4>
        <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">KEY标识</label>
                <div class="layui-input-block">
                    <input type="text" name="key" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据库类型</label>
                <div class="layui-input-inline">
                    <select name="dbType" lay-filter="aihao">
                        <option value="MySQL" selected>MySQL</option>
                        <option value="PostgreSQL">PostgreSQL</option>
                        <option value="Oracle">Oracle</option>
                        <option value="SQLServer">SQLServer</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">IP地址</label>
                <div class="layui-input-block">
                    <input type="text" name="host" autocomplete="off" placeholder="127.0.0.1" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">端口</label>
                <div class="layui-input-block">
                    <input type="text" name="port" autocomplete="off" placeholder="3306" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">数据库名</label>
                <div class="layui-input-block">
                    <input type="text" name="dbName" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" autocomplete="off" placeholder="请输入" lay-verify="required"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>
</div>
<div class="layui-col-xs12 layui-col-md8">
    <div class="datasource-list">
        <table class="layui-hide" id="ID-table-demo-data"></table>
    </div>
</div>
<h3 class="nav-title">代码生成</h3>
<hr class="layui-border-green">
<span class="tip layui-badge layui-bg-green">选择数据源即可切换列表数据</span>
<div class="gen-code">
    <div class="layui-col-xs8">
        <form class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">数据源</label>
                <div class="layui-input-inline">
                    <select name="dbType" lay-filter="demo-select-filter">
                        <#list dataSources as item>
                            <#if (item.key==activeDataSource.key)>
                                <option value="${item.key}" selected>${item.key}</option>
                            <#else>
                                <option value="${item.key}" selected>${item.key}</option>
                            </#if>
                        </#list>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="table-list">
    <table class="layui-hide" id="ID-table-demo2-data"></table>
</div>


<#--<div class="main-root">
    <h3>数据源管理</h3>
    <div class="db-manage">
        <div class="add-db">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="">
                        <div class="card shadow-sm">
                            <div class="card-header bg-primary text-white">
                                <h5 class="mb-0">添加新数据源</h5>
                            </div>
                            <div class="card-body">
                                <form id="datasource-form">
                                    <!-- KEY &ndash;&gt;
                                    <div class="mb-3">
                                        <label class="form-label">KEY标识</label>
                                        <input type="text" name="key" class="form-control"
                                               placeholder="如: MYSQL_PROD" required>
                                    </div>

                                    <!-- 驱动路径 &ndash;&gt;
                                    <div class="mb-3">
                                        <label class="form-label">数据库类型</label>
                                        <label>
                                            <select name="dbType" required class="form-control">
                                                <option selected value="MySQL">MySQL</option>
                                                <option value="PostgreSQL">PostgreSQL</option>
                                                <option value="Oracle">Oracle</option>
                                                <option value="SQLServer">SQLServer</option>
                                            </select>
                                        </label>
                                    </div>
                                    <div class="row g-3">
                                        <!-- IP地址 &ndash;&gt;
                                        <div class="col-md-6">
                                            <label class="form-label">IP地址</label>
                                            <input type="text" name="host" class="form-control"
                                                   placeholder="127.0.0.1" required>
                                        </div>

                                        <!-- 端口 &ndash;&gt;
                                        <div class="col-md-6">
                                            <label class="form-label">端口</label>
                                            <input type="number" name="port" class="form-control"
                                                   value="3306" required>
                                        </div>
                                    </div>

                                    <!-- 数据库名 &ndash;&gt;
                                    <div class="mb-3 mt-3">
                                        <label class="form-label">数据库名</label>
                                        <input type="text" name="dbName" class="form-control"
                                               placeholder="如: order_db" required>
                                    </div>

                                    <div class="row g-3">
                                        <!-- 用户名 &ndash;&gt;
                                        <div class="col-md-6">
                                            <label class="form-label">用户名</label>
                                            <input type="text" name="username" class="form-control" required>
                                        </div>

                                        <!-- 密码 &ndash;&gt;
                                        <div class="col-md-6">
                                            <label class="form-label">密码</label>
                                            <input type="password" name="password" class="form-control" required>
                                        </div>
                                    </div>

                                    <div class="d-grid mt-4">
                                        <button type="submit" class="btn btn-primary btn-lg">
                                            提交数据源
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="db-list">
            <div class="container">
                <!-- 表格容器 &ndash;&gt;
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead class="thead-dark">
                        <tr>
                            <th>序号</th>
                            <th>驱动名称</th>
                            <th>类型</th>
                            <th>KEY</th>
                            <th>URL</th>
                            <th>账户</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        &lt;#&ndash; 动态数据渲染 &ndash;&gt;
                        <#list dataSources as item>
                            <tr>
                                <td>${item?counter}</td>
                                <td>${item.driverClassName}</td>
                                <td>${item.dbType}</td>
                                <td>${item.key}</td>
                                <td>${item.url}</td>
                                <td>${item.username}</td>
                                <td>
                                    <button class="btn btn-sm btn-danger">删除</button>
                                </td>
                            </tr>
                        </#list>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="container my-5">
        <h1 class="mb-4"><i class="fas fa-database me-2"></i>数据库表结构查看</h1>
        <!-- 表选择下拉框 &ndash;&gt;
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label class="form-label"><i class="fas fa-table me-1"></i>选择数据表</label>
                        <select class="form-select" id="tableSelect">
                            <option value="">-- 请选择表 --</option>
                            <#list tables as table>
                                <option value="${table.tableName}">${table.tableName}</option>
                            </#list>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <div class="table-desc-card card h-100">
                            <div class="card-body">
                                <h5 class="card-title">表描述</h5>
                                <p id="tableDescription" class="card-text text-muted fst-italic">
                                    请从下拉框选择表查看描述
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 字段详情表格 &ndash;&gt;
        <div class="card shadow-sm">
            <div class="card-header bg-light">
                <h5 class="mb-0"><i class="fas fa-list me-2"></i>字段详情</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover align-middle" id="columnTable">
                        <thead class="table-light">
                        <tr>
                            <th><i class="fas fa-font me-1"></i>列名</th>
                            <th><i class="fas fa-code me-1"></i>数据库类型</th>
                            <th><i class="fas fa-ruler-horizontal me-1"></i>列大小</th>
                            <th><i class="fas fa-comment me-1"></i>列注释</th>
                        </tr>
                        </thead>
                        <tbody id="columnTableBody">
                        <tr>
                            <td colspan="4" class="text-center text-muted py-5">
                                请选择数据表以查看字段信息
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>-->
</body>
</html>